<template>
	<view class="wf-box" :style="{ paddingTop: totalheight }">
		<HeadNav titleName="用户信息" :topheight="navBarHeight" @rightClick="expand">
			<template v-slot:rightIcon>
				<image src="../../static/img/chat-29.png" class="head-more"></image>
			</template>
		</HeadNav>

		<view class="main">
			<view class="user-info">
				<view class="user-top">
					<image :src="user.avatar" class="user-avt"></image>
					<view class="user-center">
						<view class="user-t1">
							<text class="name">{{ user.nickname }}</text>
							<image src="../../static/img/me-02.png"></image>
							
						</view>

						<view class="user-t2">
							<text>ID:{{ user.id }}</text>
							<image src="../../static/img/chat-30.png" @click="copyId"></image>
						</view>


					</view>

					<view class="user-start">
						<image src="../../static/img/chat-31.png"></image>
					</view>
				</view>

				<view class="user-down">
					<!-- <view class="user-op-im" @click="setName">
						<text>设置别名</text>
						<image src="../../static/img/chat-32.png"></image>
					</view> -->
					<view class="user-op-im">
						<text>C圈</text>
						<image src="../../static/img/chat-32.png"></image>
					</view>
				</view>
			</view>

			<view class="opertion-more" @click="addFriend">
				<view class="opertion-im">添加好友</view>
			</view>
		</view>


		<!-- v-if="moreShow" @click="closePopup" -->
		<view class="operate-list" v-if="moreShow" @click="closePopup">
			<view class="oper-mil" :style="{ top: totalheight }">
				<uni-transition ref="ani" custom-class="transition" mode-class="fade" :styles="styles" :show="moreFlag">
					<view class="operate-nbox">
						<view class="oper-im">
							<view class="oper-im-bwarp">
								<text>添加好友</text>
							</view>
						</view>

						<view class="oper-im">
							<view class="oper-im-bwarp">
								<text>加入黑名单</text>
							</view>
						</view>
					</view>
				</uni-transition>
			</view>
		</view>

		<uni-popup ref="popup" type="center">
			<view class="popup-box">
				<view class="popup-title">设置备注名</view>
				<view class="popup-sub">
					<input type="text" placeholder="请输入备注名">
				</view>
				<view class="popup-footer">
					<view class="cancle" @click="close()">取消</view>
					<view class="confim">保存</view>
				</view>
			</view>
		</uni-popup>

		<uni-popup ref="popup2" type="center">
			<view class="popup-box">
				<view class="popup-title">加入黑名单？</view>
				<view class="popup-stxt">
					加入黑名单，你将不会收到对方的信息， 并且你们相互看不到对方K圈的更新
				</view>
				<view class="popup-footer">
					<view class="cancle" @click="close()">取消</view>
					<view class="confim">确定</view>
				</view>
			</view>
		</uni-popup>

		<uni-popup ref="popup3" type="center">
			<view class="popup-box">
				<view class="popup-title">删除好友？</view>
				<view class="popup-stxt">
					是否删除联系人《夜晚的星光》，并清空聊天记录
				</view>
				<view class="popup-footer">
					<view class="cancle" @click="close()">取消</view>
					<view class="confim">确定</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import { throttle } from "@/utils/common.js"
	import { addFriendApi , addFriendRequestApi } from '@/api/api.js'
	import HeadNav from "@/components/HeadNav"
	import navBarMixin from '@/mixin/navBarMixin.js'
	export default {
		data() {
			return {
				opmillHeight: '',
				moreShow: false,
				moreFlag: false,
				friendId: '',
				styles: {
					justifyContent: 'center',
					alignItems: 'center',
					width: '220rpx',
					textAlign: 'center',
					backgroundColor: 'transparent',
				},
				user: '',
				userInfo: uni.getStorageSync('userInfo')
			}
		},
		components: {
			HeadNav
		},
		mixins: [navBarMixin],
		methods: {
			expand() {
				this.moreShow = !this.moreShow
				this.moreFlag = !this.moreFlag
			},
			closePopup() {
				this.moreFlag = false
				this.moreShow = false
			},
			setName() {
				this.$refs.popup.open()
				// this.$refs.popup2.open()
			},
			close() {
				this.$refs.popup.close()
				this.$refs.popup2.close()
			},
			// 添加好友
			addFriend() {
				throttle(async () => {
					const res = await addFriendRequestApi({
						receiveUserId: this.user.id,
						requestDesc:  '我是' + this.userInfo.nickname
					})
					
					if (!res.code) {
						let friend = {
							id: this.user.id,
							nickName: this.user.nickname,
							headImage: this.user.avatar,
							// online: this.user.online
						}
						
						this.$store.commit("addFriend", friend);
						
						uni.showToast({
							title: '发送成功',
							icon: 'none'
						})
					
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/friend/friend'
							})
						}, 3000)
					
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
				},4000)
				
			},
			// 复制id
			copyId() {
				uni.setClipboardData({
					data: this.user.id,
					success: function() {
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						})
					}
				})
			},
			
			loadUserInfo(id){
				this.$http({
					url: "/user/getUserById?id=" + id,
					method: 'GET'
				}).then((user) => {
					console.log('user===',user)
					
					this.user = user;
				})
			}
		},
		onLoad(options) {
			// this.user = JSON.parse(options.data)
			
			// 查询用户信息
			this.loadUserInfo(options.data);
			
			console.log('this.user===',this.user)
		}

	}
</script>

<style lang="scss" scoped>
	.wf-box {
		overflow: hidden;

		.head-more {
			width: 48rpx;
			height: 48rpx;
		}

		.main {
			padding: 0 30rpx;
			margin-top: 30rpx;

			.user-info {
				background: #fff;
				border-radius: 10rpx;
				padding: 0 30rpx;
				padding-top: 36rpx;
				padding-bottom: 56rpx;
				background: #fff;
				box-sizing: border-box;
				border-radius: 10rpx;

				.user-top {
					display: flex;
					align-items: center;

					.user-avt {
						width: 80rpx;
						height: 80rpx;
					}

					.user-center {
						margin-left: 20rpx;

						// display: flex;
						// flex-direction: column;
						// justify-content: space-between;
						.user-t1 {
							display: flex;
							align-items: center;

							.name {
								color: #333;
								font-size: 28rpx;
								font-weight: bold;
							}

							image {
								margin-left: 14rpx;
								width: 100rpx;
								height: 38rpx;
							}
						}

						.user-t2 {
							display: flex;

							text {
								color: #6C6B6B;
							}

							image {
								margin-left: 12rpx;
								width: 40rpx;
								height: 40rpx;
							}
						}

						.user-t3 {
							image {
								width: 36rpx;
								height: 36rpx;
							}
						}
					}

					.user-start {
						margin-left: auto;

						image {
							width: 36rpx;
							height: 36rpx;
						}
					}

				}

				.user-down {
					margin-top: 12rpx;

					.user-op-im {
						display: flex;
						align-items: center;
						height: 110rpx;
						border-bottom: 2rpx solid #eee;

						text {
							font-size: 28rpx;
							color: #333;
						}

						image {
							margin-left: auto;
							width: 10rpx;
							height: 20rpx;
						}
					}
				}

			}

			.opertion-more {
				margin-top: 30rpx;
				padding: 0 30rpx;
				background: #fff;
				border-radius: 10rpx;

				.opertion-im {
					height: 108rpx;
					line-height: 108rpx;
					text-align: center;
					color: #333;
				}
			}

		}

		.operate-list {
			position: absolute;
			top: 0;
			width: 100%;
			min-height: 100%;
			background: transparent;

			.oper-mil {
				position: fixed;
				// top: 96rpx;
				right: 26rpx;
				width: 220rpx;

				// height: 276rpx;
				// background: red;
				.operate-nbox {
					width: 100%;
					height: 100%;
					padding: 12rpx 0 0;
					background: url('../../static/img/chat-03.png') no-repeat;
					background-size: 100% 100%;
					box-sizing: border-box;

					.oper-im {
						padding: 0 30rpx;

						.oper-im-bwarp {
							padding: 15rpx 0;
							display: flex;
							// justify-content: space-between;
						}

						image {
							width: 48rpx;
							height: 48rpx;
						}

						text {
							margin-left: 16rpx;
							color: #fff;
							font-size: 24rpx;
						}
					}


				}
			}
		}

		.popup-box {
			width: 560rpx;
			// height: 528rpx;
			padding: 0 50rpx;
			padding-top: 140rpx;
			padding-bottom: 40rpx;
			border-radius: 20rpx;
			box-sizing: border-box;
			background: #fff;

			// background: url('../../static/img/me-32.png') no-repeat;
			// background-size: 100% 100%;
			.popup-title {
				font-size: 32rpx;
				color: #333;
				font-weight: bold;
				text-align: center;
			}

			.popup-sub {
				margin-top: 36rpx;
				height: 80rpx;
				padding: 0 30rpx;
				background: #F4F4F4;

				input {
					height: 100%;
					font-size: 24rpx;
				}

				// font-size: 28rpx;
				// text-align: center;
			}

			.popup-stxt {
				margin-top: 45rpx;
				color: #666;
				text-align: center;
			}

			.popup-footer {
				display: flex;
				justify-content: space-between;
				margin-top: 70rpx;

				.cancle {
					width: 200rpx;
					line-height: 76rpx;
					text-align: center;
					border: 2rpx solid #3F93FF;
					border-radius: 40rpx;
				}

				.confim {
					width: 200rpx;
					line-height: 76rpx;
					text-align: center;
					border-radius: 40rpx;
					background: #3F93FF;
					color: #fff;
				}
			}
		}
	}
</style>